<template>
	<view class="box-bg" style="width: 100%;">
			<uni-nav-bar backgroundColor="#f5f5f5" shadow left-icon="left" :border='false' :shadow='false' @clickLeft="goBack" />
		</view>
	<view class="container">
		
		<view class="header">
			<text class="title">绑定手机号</text><br />
			<text class="subtitle">未绑定的手机号验证通过后自动完成注册</text>
		</view>
		<view class="form">
			<view class="input-group">
				<text class="label">+86</text>
				<uni-easyinput :inputBorder="false" placeholder="请输入手机号"></uni-easyinput>
			</view>
			<view class="input-group">
				<uni-easyinput :inputBorder="false" placeholder="请输入验证码"></uni-easyinput>
				<button class="codeBtn">获取验证码</button>
			</view>
		</view>
		<button class="bind-button" @click="goHome">绑定并登录</button>
		<view class="agreement">
			<checkbox checked="true" />
			<text>我已阅读并同意</text>
			<navigator url="/pages/agreement/agreement">
				<text class="link">《服务协议》</text>
			</navigator>
			<text>和</text>
			<navigator url="/pages/privacy/privacy">
				<text class="link">《个人信息保护指引》</text>
			</navigator>
		</view>
	</view>
</template>

<script setup>
	function goHome() {
		uni.navigateTo({
			url:"/pages/index/index"
		})
	}
	const goBack = () => {
		uni.navigateBack({
			delta: 1
		})
	}
</script>

<style>
	.container {
		padding: 20px;
	}

	.header {
		margin-bottom: 20px;
	}

	.title {
		font-size: 50rpx;
	}

	.subtitle {
		font-size: 14px;
		color: #666;
	}

	.form {
		margin-bottom: 20px;
	}

	.input-group {
		display: flex;
		align-items: center;
		margin-bottom: 15px;
	}

	.label {
		font-size: 16px;
	}

	.input {
		flex: 1;
		padding: 10px;
		border: 1px solid #ccc;
		border-radius: 5px;
	}

	.codeBtn {
		margin-left: 10px;
		border: none;
		border-radius: 5px;
		background: white;
	}

	.bind-button {
		width: 100%;
		/* padding: 15px; */
		background: linear-gradient(90deg, rgba(52, 120, 246, 1) 0%, rgba(2, 167, 240, 1) 99%);
		color: white;
		border: none;
		border-radius: 5px;
	}

	.agreement {
		display: flex;
		align-items: center;
		font-size: 12px;
	}

	.link {
		color: #007aff;
	}
</style>